<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>复合选择器</title>
    <style>
        /*子类选择器*/
       .dad > .me {
           background-color: black;
           color: pink;
       }
        /*并集选择器*/
       .div-and,
       .and1,
       .and2 {
           width: 600px;
           display: inline-block;
           background-color: black;
           color: pink;
       }
       /*伪类选择器*/
       /*没有访问过的链接*/
        a {
            background-color: gold;
            display: block;
        }
        a:link {
            /*颜色变黑*/
            color: black;
            /*去掉下划线*/
            text-decoration: none;
        }
        a:visited {
            /*颜色变红*/
            color: red;
            /*去掉下划线*/
            text-decoration: none;
        }
        a:hover {
            color: green;
        }
        a:active {
            color: gold;
        }
        input:focus {
            background-color: gold;
        }
        input {
            width: 60%;
        }
    </style>
</head>
<body>
<h4>复合选择器</h4>
<div >
    我是black的父亲
    <div>
        我是black
    </div>
</div>
<h4>子选择器</h4>
<div class="dad">
    我是black的父亲
    <div class="me">
        我是black
        <div>
            我是black的儿子
        </div>
    </div>
</div>
<h4>并集选择器</h4>
<div class="div-and">
    我是black的父亲
    <div>
        我是black
    </div>
</div>
<div class="and1">我好</div>
<span class="and2">你好</span>
<h4>伪类选择器</h4>
<a href="#">小猪佩奇</a>
<a href="#">小猪佩奇</a>
<h4>行内块元素</h4>
<input type="text"><input type="text"><input type="text">
<h4>元素间转换</h4>
<a href="#">Black</a>
</body>
</html>